<template>
  <div>
    <div class="head">
      <h2>
        <van-icon name="arrow-left" @click="tap"/>优品
        <van-icon name="search"/>
      </h2>
      <div class="banner">
        <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt @click="todo()">
      </div>
      <div class="ticket">
        <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList"/>
        <van-popup v-model="showList" position="bottom" v-if="seen">
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>
      <ul class="nav">
        <router-link to="/cleanpage?id=1" tag="li">
          <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
          <p>清洁</p>
        </router-link>
        <router-link to="/cleanpage?id=2" tag="li">
          <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
          <p>喂养</p>
        </router-link>
        <router-link to="/cleanpage?id=3" tag="li">
          <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
          <p>童装</p>
        </router-link>
        <router-link to="/cleanpage?id=4" tag="li">
          <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
          <p>更多</p>
        </router-link>
      </ul>
    </div>
    <div class="list">
      <h4>
        宝宝必备
        <router-link to="/babies" tag="span">all</router-link>
      </h4>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value:1.5,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
  showList: ''
};
export default {
  name: "Bestitem",
  data() {
    return {
      chosenCoupon: -1,
      coupons: [
          {
               available: 1,
                condition: "无使用门槛\n最多优惠12元",
                reason: "",
                value:1.5,
                name: "优惠券名称",
                startAt: 1489104000,
                endAt: 1514592000,
                valueDesc: "1.5",
                unitDesc: "元",
                showList: ''
          }
      ],
      disabledCoupons: [coupon],
      seen:false,
      
    };
  },
  methods: {
    tap() {
      this.$router.go(-1);
    },
    todo() {
      this.$router.push("/buyinterface");
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    showList(){
        this.seen =! this.seen
    }
    
  }
};
</script>

<style scoped>
.head {
  left: 0px;
  top: 0px;
  width: 375px;
  height: 126px;
  line-height: 17px;
  background-color: rgba(234, 234, 234, 1);
  color: rgba(166, 164, 164, 1);
  font-size: 12px;
  text-align: center;
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
}
.head h2 {
  font-weight: normal;
  height: 24px;
  font-size: 16px;
  color: #000;
  line-height: 24px;
  margin-top: 6px;
  width: 100%;
}
.head h2 .van-icon {
  position: relative;
}
.head h2 .van-icon:nth-of-type(1) {
  left: -130px;
}
.head h2 .van-icon:nth-of-type(2) {
  right: -130px;
}
.banner {
  left: 13px;
  top: 46px;
  width: 348px;
  height: 150px;
  line-height: 17px;
  border-radius: 12px;
  background-color: rgba(217, 217, 217, 1);
  position: absolute;
  overflow: hidden;
}
.banner img {
  display: block;
  width: 348px;
  height: 150px;
}
.head .ticket {
  left: 12px;
  top: 206px;
  width: 348px;
  height: 50px;
  line-height: 17px;
  border-radius: 12px;
  position: absolute;
}
.van-coupon-cell {
  line-height: 50px;
  width: 348px;
  height: 50px;
  line-height: 17px;
  border-radius: 12px;
  background-color: rgba(217, 217, 217, 1);
}
.van-coupon-cell >>> van-cell__value {
  margin-top: 20px;
}
.nav {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0px;
  top: 270px;
}
.nav li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.nav li img {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 50%;
}
.list {
  width: 100%;
  position: relative;
  top: 260px;
}
.list h4 {
  height: 24px;
  font-size: 14px;
  font-weight: normal;
  padding: 0 13px;
}
.list h4 span {
  float: right;
}
</style>